<template>
    <div>
        <el-table :data="data.tableData" border style="width: 100%">
            <el-table-column :data="data.tableConfig.selettion" type="selection" width="39"></el-table-column>
            <el-table-column 
                v-for="item in data.tableConfig.tableHead" 
                :key="item.field" 
                :prop="item.field" 
                :lable="item.lable" 
                :value="item.value"
                :width="item.width">
            </el-table-column>

            <!-- <el-table-column fixed="right" label="禁用权限" width="120">
                <el-switch v-model="switchValue" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column> -->
        </el-table>
    </div>
</template>

<script>
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, reactive ,ref, watch } from '@vue/composition-api';

export default {
    name: "tableIndex",
    props: {
        config: {
            type: Object,
            default: ()=>{}
        }
    },
    setup(props) {
        console.log(props.config, 'props.config1')

        // const switchValue = ref(true);
        const data = reactive({
            tableConfig: {
                selettion: true,
                recordCheckbox: false,
                tableHead:[]
            },
            tableData: [
            {
                username: '1234567890@qq.com',
                date: '2016-05-02',
                truename: '磊磊闲说之XX',
                phone: '13788888888',
                region: '上海市普陀区金沙江路磊磊闲说策划俱乐部1518号',
                role: '管理者',
                status: 200333
            }, 
            {
                username: '123@qq.com',
                date: '2016-05-04',
                truename: '王小虎',
                phone: '13788888888',
                region: '上海市普陀区金沙江路磊磊闲说策划俱乐部1518号',
                role: '管理者',
                status: 200333
            }
            ]
        })
        /**
         * 方法 mehtods
         */
        // 初始化table配置项 // const声明对象或 数组
        // 匹配相同的key，如果存在，则替换
        const initTableConfig = () => {
            let configData = props.config;
            let keys = Object.keys(data.tableConfig);
            for(let key in configData) {
                if(keys.includes(key)){  //  ["selection", "recordCheckbox", "requestUrl", "tHead"].includes("selection")
                    data.tableConfig[key] = configData[key];
                }
            }
        }
        data.tableConfig.tableHead = props.config.table_head;
        data.tableConfig.selettion = props.config.selettion;
            console.log(data.tableConfig.tableHead, 'props.config2')


        // const handleClick =((row)=> {
        //     console.log(row,"row");
        // })
        /* 
          生命周期3.0
        */
        watch(()=>{

        })
        onMounted(()=>{

        })
        onBeforeMount(()=>{
            // data.tableConfig.tableHead = props.config.table_head;
            // console.log(data.tableConfig.tableHead, 'props.config2')
            // data.tableConfig.selettion = props.config.selettion;
        })
        onBeforeUpdate(()=>{

        })
        onUpdated(()=>{

        })
        return {
            data,initTableConfig
        }
    }
}
</script>

<style>

</style>




<template>
    <div>
        <el-row :gutter="6">
            <el-col :span="4">
                <div class="user-lable-wrap user-key-work">
                    <label for="">关键字:</label>
                    <div class="wrap-content">
                        <!-- 组件传参 -->
                        <seleteKey :config="data.configOption" ></seleteKey>
                    </div>
                </div>
            </el-col>
                <seleteBox></seleteBox>
            <el-col :span="6">
                <el-button class="pull-right" type="danger" @click="dialog_user = true">添加用户</el-button>
            </el-col>
        </el-row>
        <hr style="margin:20px 0;">
        <!-- 表格组件 -->
        <tableUser :config="data.configTable"></tableUser>
        <!-- <el-table :data="data.tableData" border style="width: 100%">
            <el-table-column type="selection" width="39"></el-table-column>
            <el-table-column fixed prop="email" label="邮箱" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="phone" label="电话" width="150"></el-table-column>
            <el-table-column prop="address" label="地址" width="380"></el-table-column>
            <el-table-column prop="role" label="角色" width="80"></el-table-column>
            <el-table-column fixed="right" label="禁用权限" width="120">
                <el-switch v-model="switchValue" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table> -->
        <div class="pageName">
            <el-row>
                <el-col :span="12">
                    <el-button size="medium">批量删除</el-button>
                </el-col>
                <el-col :span="12">
                    <el-pagination
                        class="pull-right"
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[10, 20, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="20">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>
        <!--新增弹窗 -->
        <dailogUser :flag.sync="dialog_user" @close="closeDailog"></dailogUser>
    </div>
</template>

<script>
import { reactive ,ref } from '@vue/composition-api';
import seleteKey from "../../components/Selete/selete";
// import seleteKey from "../../components/Selete/selete2.0";
import { QiniuToKen } from "../../api/common";
import dailogUser from "../../views/User/dailog/add";
import tableUser from "../../components/TableUser/table";
import seleteBox from "../../components/SeleteBox/seletebox";
export default {
    name: "userIndex",
    components: {
        seleteKey,seleteBox,dailogUser,tableUser
    },
    setup(props,{ root,refs }){
        const dialog_user = ref(false);   //触发true、false的切换
        const data = reactive({
            configOption: {
                init: ["name", "phone"]
            },
            // table组件配置参数
            configTable:{
                //翻页记录
                recordCheckbox: true,
                //多选框
                setlettion: false,
                //自定义传key值
                table_head:[
                    { 
                        label: "邮箱/用户名",
                        field: "username",
                        width: 180,
                        // fixed: "left",
                    },
                    { 
                        label: "姓名",
                        field: "truename",
                        width: 120
                    },
                    { 
                        label: "手机号",
                        field: "phone",
                        width: 150
                    },
                    { 
                        label: "地区",
                        field: "region",
                        width: 380
                    },
                    { 
                        label: "角色",
                        field: "role",
                        width: 80
                    },
                    { 
                        label: "禁启用状态",
                        field: "status",
                        // columnType: "slot",
                        // slotName: "status",
                        width: 120,
                        // fixed 
                    },
                    { 
                        label: "操作",
                        field: "code",
                        // columnType: "slot",
                        // slotName: "operation",
                        width: 100,
                        // fixed 
                    } 
                ]
            }
        })
        const closeDailog = (()=>{
            // console.log(dialog_user.value, 'closeDailog')
            dialog_user.value = false
        })
        const handleSizeChange =((val) =>{
            console.log(val);
        })
        const handleCurrentChange = ((val) =>{
            console.log(val);
        })
        return{
            data,dialog_user,closeDailog,
            handleSizeChange,handleCurrentChange
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../styles/config.scss";
@import "../../styles/main.scss";
.user-lable-wrap{
    &.user-key-work { @include lableDemo(left, 40, 55); }
}
.pageName{
    margin-top: 18px    ;
}
/******************************************************************************
组件化，页面开发组件是页面组成的一部分，是一个具有独立逻辑和功能或界面，同时根据规定的接口规则进行融合，简单理解是，
把页面分拆成不同的小模块，在重新组合
高内聚性
低藕合度
组件三要素，props（组价属性参数） event（自定义事件触发组件事件，经常回调父组件方法） slot（用于组件功能的扩展，父组件的内容传入子组件，在子组件中显示）
 */
</style>